<template>
	<div class="search-dark text-white2 cutting-box">
		<!-- 切割优化 -->
		<pol-title title="切割优化"></pol-title>
		<div class="border-solid bg-tm radius-sm padding-lg main-box-height">
			<lay-json-schema-form :model="formData" :schema="schema"></lay-json-schema-form>
			<div style="clear: both;"></div>
			<template v-for="(item, index) in 7" :key="index">
				<div class="flex align-center text-bold margin-top">
					<div class="flex-sub">
						<sketch-map></sketch-map>
					</div>

					<div class="flex align-center cutting-r-box">
						<div class="flex-sub">
							<div class="flex align-center">
								<div class="cutting-r-title">
									拉速：1.5m/min
								</div>
								<div class="cutting-r-mid">
									距离降拉速时间 <span class="text-xl text-red">50</span> s
								</div>
								<div class="cutting-status" :class="index > 2 ? 'status-active' : ''"></div>
							</div>
							
							<div class="flex align-center margin-top-lg">
								<div class="cutting-r-title">
									拉速：1.5m/min
								</div>
								<div class="flex align-center flex-sub">
									<span class="margin-right">进度</span>
									<div class="flex-sub">
										<el-progress :stroke-width="20" :percentage="70" color="#139AFE" :show-text="false"  style="--el-border-color-lighter: #2B4A7E"/>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

			</template>
		</div>
	</div>
</template>

<script setup>
	import sketchMap from '../dashboard/components/sketchMap.vue'

	import { ref } from 'vue';

	//表单数据
	const formData = ref({
		CardTypeCode: '', //
		CardTypeName: '', //
		CardTypeName3: '',
		CardTypeName4: '',
	});

	//表单配置
	const schema = ref({
		CardTypeCode: {
			label: '优化模式',
			type: 'select',
			props: {
				showSearch: true, //开启搜索
				allowClear: true, //是否允许清空
				options: [{
					label: '铸机维护中',
					value: '1',
				}],

				placeholder: '请选择优化模式',
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName: {
			label: '状态',
			type: 'select',
			props: {
				showSearch: true, //开启搜索
				allowClear: true, //是否允许清空
				options: [{
					label: '运行中',
					value: '1',
				}],
				placeholder: '请选择状态',
			},
			colProps: {
				md: 4,
			},
		},

		CardTypeName4: {
			label: '1#中包待补充重量',
			type: 'input',
			props: {
				placeholder: '请输入',
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName5: {
			label: '1#中包剩余重量',
			type: 'input',
			props: {
				placeholder: '请输入',
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName6: {
			label: '2#中包待补充重量',
			type: 'input',
			props: {
				placeholder: '请输入',
			},
			colProps: {
				md: 4,
			},
		},
		CardTypeName7: {
			label: '2#中包剩余重量',
			type: 'input',
			props: {
				placeholder: '请输入',
			},
			colProps: {
				md: 4,
			},
		},
	});
</script>

<style lang="scss" scoped>
	.cutting-r-box {
		height: 100px;
		flex: 0 0 450px;
		margin-left: 50px;
		padding-left: 40px;
		position: relative;

		&::after {
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 1px;
			content: '';
			border: 1px solid;
			border-image: linear-gradient(90deg, rgba(8, 124, 231, 1), rgba(33, 78, 150, 1)) 1 1;
		}
		
		.cutting-r-title{
			flex: 0 0 160px;
		}
		
		.cutting-r-mid {
			flex: 0 0 200px;
		}
		
		.cutting-status{
			width: 20px;
			height: 20px;
			border-radius: 50%;
			background-color: #FF0000;
		}
		
		
		.status-active{
			background-color: #07F4DD;
		}
	}
</style>